<template>
  <div class="songlist__dsc">
    <div class="songlist__dsc--img">
      <img :src="desc.coverImgUrl" alt />
      <span>{{ playCounts }}</span>
    </div>
    <div class="songlist__dsc--text">
      <div class="songlist__desc--name">{{ desc.name }}</div>
      <div class="songlist__desc--wangyi">
        <div class="logo">
          <img src="../assets/2.png" alt />
        </div>
        <div class="logo__dsc">网易云音乐</div>
      </div>
      <div class="songlist__text">{{ desc.description }}</div>
    </div>
  </div>
</template>
<script setup>
import { computed, defineProps } from 'vue'
const props = defineProps({
  desc: Object
})
const playCounts = computed(() => {
  const multiple = Math.pow(10, 8)
  const num = props.desc.playCount / multiple
  return `${num.toFixed(1)}亿`
})
</script>
<style lang="stylus">
.songlist__dsc
  padding 0 14px
  display flex
  .songlist__dsc--img
    position relative
    width 150px
    height 150px
    border-radius 10px
    overflow hidden
    filter: contrast(120%);
    // box-shadow: 0 1px 10px rgb(0 0 0 / 40%);
    img
      width 100%
      height 100%
    span
      position absolute
      right 6px
      top 5px
      color white
      font-size 14px
  .songlist__dsc--text
    box-sizing border-box
    overflow hidden
    padding-left 14px
    flex 1
    .songlist__desc--name
      color #fff
      font-size 19px
      margin-bottom 10px
    .songlist__desc--wangyi
      display flex
      margin-top 20px
      .logo
        height 24px
        width 24px
        img
          width 100%
          height 100%
      .logo__dsc
        flex 1
        padding-left 5px
        line-height 24px
        font-size 13px
        color #e7e5e9
    .songlist__text
      box-sizing border-box
      margin  14px 0
      color #ffffffb0
      font-size 12px     
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
</style>